<template>
  <view class="dark header-container">
    <view class="camera-view">
      <uni-icons type="camera" size="20" color="#c3b7b7" />
      <text class="camera-text">随 拍</text>
    </view>
    <view class="follow-title">
      <view
        class="el-navigator"
        :class="{ active: currentTab === 'follow' }"
        @click="navigateTo(followPage)"
      >
        关注
      </view>
      <view
        class="el-navigator"
        :class="{ active: currentTab === 'friends' }"
        @click="navigateTo(friendsPage)"
      >
        好友
      </view>
    </view>
  </view>
</template>
<script>
  import friend from "@/API/modules/friend";
  import { followPage, friendsPage } from "@/API/pageConst";
  import Camera from "@/components/common/icon/CameraIcon.vue";

  export default {
    name: "FollowHeader",
    components: {
      Camera,
    },
    props: {
      currentTab: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        followPage,
        friendsPage,
      };
    },
    methods: {
      navigateTo(url) {
        if (url && followPage === url) {
          uni.switchTab({ url });
        } else {
          uni.navigateTo({ url });
        }
      },
    },
    mounted() {},
  };
</script>
<style>
  .active {
    color: #f0f0f0;
    padding-bottom: 5px;
    border-bottom: 2px solid #f00;
  }
  .camera-view {
    min-width: 80px;
    margin: 0 10px;
    height: 35px;
    line-height: 35px;
    display: flex;
    align-items: center;
  }
  .camera-icon {
    height: 20px;
    width: 20px;
    vertical-align: middle;
  }
  .camera-text {
    padding-left: 10px;
    vertical-align: middle;
    line-height: 20px;
    font-size: 14px;
  }
  .follow-title {
    font-size: 18px;
    min-width: 200px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
  }
</style>
